1
2
Nächster
Da sich die Frage auf ein einzelnes Element bezieht, ist dieser Code möglicherweise besser geeignet:
// Überprüft den CSS-Inhalt auf Anzeige: [none | block], ignoriert die Sichtbarkeit: [true | false]
$ (Element) .is (": sichtbar");
// Das gleiche funktioniert mit versteckt
$ (Element) .is (": hidden");
Es ist dasselbe wie der Vorschlag von twernt, wird jedoch auf ein einzelnes Element angewendet. und es entspricht dem in den jQuery-FAQ empfohlenen Algorithmus.
Wir verwenden jQuery's is (), um das ausgewählte Element mit einem anderen Element, Selektor oder einem beliebigen jQuery-Objekt zu überprüfen. Diese Methode durchläuft die DOM-Elemente, um eine Übereinstimmung zu finden, die den übergebenen Parameter erfüllt. Es wird true zurückgegeben, wenn eine Übereinstimmung vorliegt, andernfalls false.
|
Sie können den versteckten Selektor verwenden:
// Entspricht allen versteckten Elementen
$ ('Element: versteckt')
Und der sichtbare Selektor:
// Entspricht allen sichtbaren Elementen
$ ('Element: sichtbar')
|
if ($ (Element) .css ('Anzeige') == 'keine' || $ (Element) .css ("Sichtbarkeit") == "versteckt") {
// 'Element' ist versteckt
}}
Die obige Methode berücksichtigt nicht die Sichtbarkeit des übergeordneten Elements. Um auch das übergeordnete Element zu berücksichtigen, sollten Sie .is (": hidden") oder .is (": visible") verwenden.
Zum Beispiel,
Div2
Bei der obigen Methode wird div2 als sichtbar betrachtet, während: nicht sichtbar. Das oben Genannte kann jedoch in vielen Fällen hilfreich sein, insbesondere wenn Sie feststellen müssen, ob im ausgeblendeten übergeordneten Element Fehlerdivs sichtbar sind, da unter solchen Bedingungen: sichtbar nicht funktioniert.
|
Keine dieser Antworten befasst sich mit der Frage, nach der ich gesucht habe: "Wie gehe ich mit sichtbaren Elementen um: versteckt?". Weder: sichtbar noch: versteckt wird dies behandeln, da beide nach einer Anzeige gemäß der Dokumentation suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für die CSS-Sichtbarkeit. So habe ich es gelöst (Standard-jQuery-Selektoren, möglicherweise gibt es eine komprimiertere Syntax):
$ (". item"). each (function () {
if ($ (this) .css ("Sichtbarkeit") == "versteckt") {
// Nicht sichtbaren Zustand behandeln
} else {
// sichtbaren Zustand behandeln
}}
});
|
Aus Wie bestimme ich den Status eines umgeschalteten Elements?
Mit den Selektoren: sichtbar und: versteckt können Sie feststellen, ob ein Element reduziert ist oder nicht.
var isVisible = $ ('# myDiv'). is (': sichtbar');
var isHidden = $ ('# myDiv'). is (': hidden');
Wenn Sie einfach auf ein Element basierend auf seiner Sichtbarkeit einwirken, können Sie einfach Folgendes hinzufügen: sichtbar oder: versteckt im Auswahlausdruck. Zum Beispiel:
$ ('# myDiv: sichtbar'). animate ({left: '+ = 200px'}, 'slow');
|
Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie häufig sofort weitermachen und etwas anderes damit tun. Die jQuery-Verkettung macht dies einfach.
Wenn Sie also einen Selektor haben und nur dann eine Aktion ausführen möchten, wenn dieser sichtbar oder ausgeblendet ist, können Sie Filter (": sichtbar") oder Filter (": versteckt") verwenden und ihn anschließend mit der gewünschten Aktion verketten nehmen.
Also anstelle einer if-Anweisung wie folgt:
if ($ ('# btnUpdate'). is (": sichtbar"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Schaltfläche ausblenden
}}
Oder effizienter, aber noch hässlicher:
var button = $ ('# btnUpdate');
if (button.is (": sichtbar"))
{
button.animate ({width: "toggle"}); // Schaltfläche ausblenden
}}
Sie können alles in einer Zeile erledigen:
$ ('# btnUpdate'). filter (": sichtbar"). animate ({width: "toggle"});
|
Der: sichtbare Selektor gemäß der jQuery-Dokumentation:
Sie haben einen CSS-Anzeigewert von none.
Sie sind Formularelemente mit dem Typ = "versteckt".
Ihre Breite und Höhe werden explizit auf 0 gesetzt.
Ein Vorfahrenelement ist ausgeblendet, sodass das Element nicht auf der Seite angezeigt wird.
Elemente mit Sichtbarkeit: ausgeblendet oder Deckkraft: 0 gelten als sichtbar, da sie noch Platz im Layout beanspruchen.
Dies ist in einigen Fällen nützlich und in anderen nutzlos. Wenn Sie überprüfen möchten, ob das Element sichtbar ist (Anzeige! = Keine), und die Sichtbarkeit der Eltern ignorieren, werden Sie feststellen, dass .css ("Anzeige") == 'keine 'ist nicht nur schneller, sondern gibt auch die Sichtbarkeitsprüfung korrekt zurück.
Wenn Sie die Sichtbarkeit anstelle der Anzeige überprüfen möchten, sollten Sie Folgendes verwenden: .css ("Sichtbarkeit") == "versteckt".
Berücksichtigen Sie auch die zusätzlichen jQuery-Hinweise:
Da: sichtbar eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit: sichtbar die Leistungssteigerung der nativen DOM-Methode querySelectorAll () nicht nutzen. Um die beste Leistung bei Verwendung von: sichtbar zu erzielen, wählen Sie zuerst Elemente mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter (": sichtbar").
Wenn Sie sich Sorgen um die Leistung machen, sollten Sie Folgendes überprüfen: Jetzt sehen Sie mich… Leistung anzeigen / verbergen (04.05.2010). Verwenden Sie andere Methoden, um Elemente anzuzeigen und auszublenden.
|
Dies funktioniert für mich und ich benutze show () und hide (), um mein div versteckt / sichtbar zu machen:
if ($ (this) .css ('display') == 'none') {
/ * Ihr Code geht hierher * /
} else {
/ * alternative Logik * /
}}
|
Funktionsweise von Elementsichtbarkeit und jQuery;
Ein Element könnte mit Anzeige ausgeblendet werden: keine,Sichtbarkeit: versteckt oder Deckkraft: 0. Der Unterschied zwischen diesen Methoden:
Anzeige: Keine verbirgt das Element und nimmt keinen Platz ein.
Sichtbarkeit: Versteckt verbirgt das Element, nimmt aber dennoch Platz im Layout ein.
Deckkraft: 0 verbirgt das Element als "Sichtbarkeit: versteckt" und nimmt dennoch Platz im Layout ein. Der einzige Unterschied besteht darin, dass man durch die Deckkraft ein Element teilweise transparent machen kann.
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} else {
$ ('. target'). hide ();
}}
if ($ ('. target'). is (': sichtbar')) {
$ ('. target'). hide ();
} else {
$ ('. target'). show ();
}}
if ($ ('. Zielsichtbarkeit'). css ('Sichtbarkeit') == 'versteckt') {
$ ('. Zielsichtbarkeit'). css ({
Sichtbarkeit: "sichtbar",
Anzeige: ""
});
} else {
$ ('. Zielsichtbarkeit'). css ({
Sichtbarkeit: "versteckt",
Anzeige: ""
});
}}
if ($ ('. Zielsichtbarkeit'). css ('Deckkraft') == "0") {
$ ('. Zielsichtbarkeit'). css ({
Deckkraft: "1",
Anzeige: ""
});
} else {
$ ('. Zielsichtbarkeit'). css ({
Deckkraft: "0",
Anzeige: ""
});
}}
Nützliche jQuery-Umschaltmethoden:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Sie können dies auch mit einfachem JavaScript tun:
Funktion isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
return true;
}}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["sichtbarkeit"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("sichtbarkeit")! = "hidden") {
return isRendered (domObj.parentNode);
}}
}}
falsch zurückgeben;
}}
Anmerkungen:
Funktioniert überall
Funktioniert für verschachtelte Elemente
Funktioniert für CSS- und Inline-Stile
Benötigt kein Framework
|
Ich würde die CSS-Klasse .hide {display: none! Important; }.
Zum Ausblenden / Anzeigen rufe ich .addClass ("hide") /. RemoveClass ("hide") auf. Zur Überprüfung der Sichtbarkeit verwende ich .hasClass ("hide").
Es ist eine einfache und übersichtliche Möglichkeit, Elemente zu überprüfen / auszublenden / anzuzeigen, wenn Sie nicht vorhaben, die Methoden .toggle () oder .animate () zu verwenden.
|
Demo Link
$ ('# clickme'). click (function () {
$ ('# book'). toggle ('langsam', function () {
// Animation abgeschlossen.
alert ($ ('# book'). is (": sichtbar")); // <--- TRUE wenn sichtbar False wenn versteckt
});
});